import React, { useEffect, useState } from 'react'
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import {
    Box,
    Grid,
    Typography,
    Button,
} from '@material-ui/core';
import { Image } from 'components/atoms';
import { useDispatch, useSelector } from 'react-redux'
import { useHistory } from "react-router-dom";
import { callGetNewsApi, callPostNewsApi } from 'utils/networking';

const useStyles = makeStyles(theme => ({
    root: {
        width: "100%",
    },
    title: {
        fontSize: "56px",
        color: "white",
        textAlign: "center",
        textTransform: "uppercase",
        padding: "50px 0"
    },
    typography: {
        textAlign: "center",
        fontFamily: "HurmeGeometricSans3-Black",
        fontSize: "40px",
        fontStyle: "normal",
        fontWeight: 700,
        lineHeight: "40px",
        textTransform: "uppercase",
        color: "#7E53F9",
        [theme.breakpoints.up('md')]: {
            fontSize: "80px",
            lineHeight: "85px",
        },
    },
    typography2: {
        color: "#787C85",
        fontSize: "16px",
        lineHeight: "16px",
        textAlign: "center",
        width: "100%",
        textTransform: "none",
        margin: "10px 0"
    },
    typography3: {
        color: "#fff",
        fontSize: "14px",
        lineHeight: "14px",
        margin: "10px 0",
        textAlign: "left",
        width: "90%",
        [theme.breakpoints.up('md')]: {
            fontSize: "24px",
            lineHeight: "24px",
            width: "100%",
        },
    },
    typography4: {
        color: "#fff",
        fontSize: "12px",
        lineHeight: "14px",
        textAlign: "left",
        width: "100%",
    },
    main: {
        padding: "0 10px",
        [theme.breakpoints.up('md')]: {
            padding: "0 8%",
        },
    },
    button: {
        color: "#fff",
        fontSize: "10px",
        padding: "8px 2px",
        border: "1px solid #fff",
        lineHeight: "18px",
        cursor: "pointer",
        [theme.breakpoints.up('md')]: {
            padding: "8px 35px",
            display: "block",
        },
        [theme.breakpoints.up('lg')]: {
            padding: "8px 40px",
        },
    },
    grid: {
        padding: "50px 10px ",
        justifyContent: "center",
        [theme.breakpoints.up('sm')]: {
            justifyContent: "space-between",
        },
        [theme.breakpoints.up('md')]: {
            padding: "8% 8%",
        },
    },
    grid1: {
        marginBottom: "50px"
    },
    gridItem: {
        marginTop: "20px",
        padding: "10px",
        cursor: "pointer",
    },
    image: {
        height: "200px",
        width: "160px",
        position: "relative",
        [theme.breakpoints.up('sm')]: {
            height: "160px",
            width: "130px",
        },
        [theme.breakpoints.up('md')]: {
            height: "220px",
            width: "180px",
        },
        [theme.breakpoints.up('lg')]: {
            height: "300px",
            width: "250px",
        },
        background: "#999"
    },
    adImage: {
        marginTop: "30px",
        borderRadius: "8px",
        overflow: "hidden",
        height: "auto",
        "& span": {
            verticalAlign: "middle",
        },
        [theme.breakpoints.up('sm')]: {
            height: "300px",
        },
        [theme.breakpoints.up('md')]: {
            display: "block",
            height: "auto",
        },
    },
    btn: {
        color: "#fff",
        display: "flex",
        justifyContent: "left",
        alignItems: "center",
        fontSize: "16px",
        marginBottom: "20px",
        [theme.breakpoints.up('md')]: {
            marginBottom: "50px",
        },
    },
    btnItem: {
        color: "#fff",
        padding: "8px 16px",
        marginLeft: "20px",
        borderRadius: "2px",
        border: "1px solid #fff",
        cursor: "pointer",
        textAlign: "center",
    },
    muiButton: {
        color: '#FFFFFF',
        width: '70%',
    },
    textNum: {
        position: "absolute",
        right: "10px",
        bottom: "10px",
        color: "#9EFF00",
        fontSize: "20px",
        [theme.breakpoints.up('md')]: {
            fontSize: "32px",
        },
        [theme.breakpoints.up('lg')]: {
            fontSize: "38px",
        },
    }
}));

const VotingMain = ({ data }) => {

    const classes = useStyles();
    const [voteData, setVoteData] = useState([]);

    const dispatch = useDispatch()
    const history = useHistory();
    useEffect(() => {
        getServerProps()
    }, [])

    const getServerProps = async () => {
        callGetNewsApi(`vote/sub_categories?category_id=${data.id}`, dispatch, (data) => {
            setVoteData(data);
        })
    }
    const moveDetailPage = (sub_id) => {
        history.push('/voting/all', { sub_id, id: data.id, ad: data?.ad });
    }

    const moveLink = (item) =>{
        console.log(item);
        history.replace("/account/artist_profile",item)
    }


    const voted = (artist_id) => {
        const param = {
            artist_id: artist_id
        }
        callPostNewsApi('vote/update_vote', param, dispatch, (data) => {
            getServerProps()
        })
    }

    const handleNum = (num, total) => {

        if (Number(total) && Number(num)) {
            return Math.round(Number(num) / Number(total) * 100)
        } else {
            return 0
        }
    }
    return (
        <div className={classes.root}>
            <div className={classes.title}>
                {data.title}
            </div>

            <div className={classes.main}>
                {
                    voteData.map((item, index) => <div key={index}>
                        <div className={classes.btn}>
                            <div>
                                <Typography className={clsx(classes.typography, classes.typography3)}>
                                    {item.vote_sub_category_title} (LEADERS)
                                </Typography>
                                <Typography className={clsx(classes.typography, classes.typography4)}>
                                    VOTES: {item.vote_num}
                                </Typography>
                            </div>
                            <div className={classes.btnItem} onClick={() => moveDetailPage(item.vote_sub_categories_id)}>
                                SEE ALL
                            </div>
                        </div>
                        <Grid container className={classes.grid1} >
                            {
                                item?.artists?.data.map((ele, i) => <Grid item xs={6} sm={3} className={classes.gridItem} container justifyContent='center' alignItems='center' key={i} >
                                    <div className={classes.image} onClick={()=>moveLink(ele)}>
                                        <Image
                                            src={ele.avatarURL}
                                            alt={ele.avatarURL}
                                            srcSet={ele.avatarURL}
                                            lazyProps={{ width: '100%', height: '100%' }}
                                        />

                                        <div className={classes.textNum}>
                                            {handleNum(ele.vote_num, item.vote_num)}%
                                        </div>
                                    </div>
                                    <Typography className={clsx(classes.typography, classes.typography2)}>{ele.name}</Typography>
                                    <Button className={classes.muiButton} onClick={() => voted(ele.id)} color={ele.is_vote ? "inherit" : "primary"} style={{ background: ele.is_vote ? "#7E53F9" : "#787C85" }}>
                                        {
                                            ele.is_vote ? "Vote" : "Cancel Vote"
                                        }
                                    </Button>
                                </Grid>)
                            }
                        </Grid>
                    </div>)
                }
            </div >

            <Grid container className={classes.grid}>
                {
                    data?.ad?.filter((ele, i) => i < 3).map((item, index) => (
                        <Grid item xs={8} sm={3} className={classes.adImage} key={index}>
                            <a href={item.link}>
                                <Image
                                    src={item.image_url}
                                    alt={item.image_url}
                                    srcSet={item.image_url}
                                    lazyProps={{ width: '100%', height: '100%' }}
                                />
                            </a>
                        </Grid>))
                }
            </Grid>

        </div >
    )
}


VotingMain.propTypes = {
    /**
     * External classes
     */
    className: PropTypes.string,
};


export default VotingMain
